<template>
  <rb-dialog ref="orderSizeDialog" width="24.79vw">
    <el-form :model="form" label-width="6.25vw" label-position="left">
      <el-form-item label="尺码">{{ form.size }}</el-form-item>
      <el-form-item label="订单数">
        <el-input-number
          style="width: 100%; text-align: left"
          v-model="form.orders"
          :controls="false"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="计数台">
        <el-select
          v-model="form.countingTable"
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option
            v-for="item in tableList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="满框数">
        <el-input-number
          style="width: 100%"
          v-model="form.fullCount"
          :controls="false"
        ></el-input-number>
      </el-form-item>
    </el-form>
    <template #footer>
      <rb-button @click="handleSubmit">确认</rb-button>
    </template>
  </rb-dialog>
</template>

<script setup>
const emit = defineEmits(["ok"]);
const form = ref({});
const orderSizeDialog = ref();

const tableList = ref([
  {
    label: "计数台1",
    value: "1",
  },
  {
    label: "计数台2",
    value: "2",
  },
  {
    label: "计数台3",
    value: "3",
  },
]);
const open = (size) => {
  form.value = {};
  form.value.size = size;
  orderSizeDialog.value.open();
};
const handleSubmit = () => {
  emit("ok", form.value);
  orderSizeDialog.value.close();
};
defineExpose({
  open,
});
</script>

<style lang='scss' scoped>
</style>